<template>
  <div class="homened_container-info">
    <el-form ref="serviceItemRef" :model="form" label-width="110px">
      <el-scrollbar class="custom-scrollbar">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请编号"  style="font-weight: 700">
              <el-input v-model="form.applyCode" placeholder="请输入申请编号"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请日期" style="font-weight: 700">
              <el-input v-model="form.applyDate" placeholder="请输入申请日期"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请人姓名" style="font-weight: 700" >
              <el-input v-model="form.applyName" placeholder="请输入申请日期"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住状况" >
              <el-select v-model="form.livingConditions" clearable placeholder="请选择居住状况" style="width: 100%" disabled>
                <el-option v-for="dict in living_conditions" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="form.telephone" placeholder="请输入联系电话" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" >
              <el-select v-model="form.sex" clearable placeholder="请选择性别" disabled style="width: 100%">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" >
              <el-input v-model="form.idCard" placeholder="请输入身份证号"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" >
              <el-input v-model="form.birthDate" :disabled="true"  placeholder="请输入出生日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" >
              <el-input v-model="form.age" :disabled="true" placeholder="请输入年龄" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭地址" style="font-weight: 700">
              <el-input v-model="form.livingAddrProvinceName"  style="width: 130px"  disabled/>
              <el-input v-model="form.livingAddrCityName"  style="width: 130px;margin-left: 5px"  disabled/>
              <el-input v-model="form.livingAddrCountyName"  style="width: 130px;margin-left: 5px"  disabled/>
              <el-input v-model="form.livingAddrStreetName"  style="width: 150px;margin-left: 5px"  disabled/>
              <el-input v-model="form.livingAddrCommunityName"  style="width: 190px;margin-left: 5px"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭详细地址">
              <el-input v-model="form.livingDetailAddress" placeholder="请输入家庭详细地址" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代理人姓名">
              <el-input v-model="form.agentName" placeholder="请输入代理人姓名" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代理人电话" >
              <el-input v-model="form.agentTelephone" placeholder="请输入联系人电话" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证正面照"  style="font-weight: 700">
              <el-image  :src="form.positiveUrl" class="avatar" style="width: 280px;height: 180px;"  :zoom-rate="1.2"
                         :max-scale="7"
                         :min-scale="0.2"
                         :preview-src-list="[form.positiveUrl]" fit="cover"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证反面照"  style="font-weight: 700">
              <el-image  :src="form.negativeUrl" class="avatar" style="width: 280px;height: 180px;"  :zoom-rate="1.2"
                         :max-scale="7"
                         :min-scale="0.2"
                         :preview-src-list="[form.negativeUrl]" fit="cover"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item >
              <template #label>
                <div class="custom-label" style="line-height:18px;font-weight: 700">户口本内页 （自己那页）</div>
              </template>
              <el-image  :src="form.householdRegisterUrl" class="avatar" style="width: 280px;height: 180px;"  :zoom-rate="1.2"
                         :max-scale="7"
                         :min-scale="0.2"
                         :preview-src-list="[form.householdRegisterUrl]" fit="cover"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.reviewerName">
            <el-form-item label="审核人姓名" prop="reviewerName">
              <el-input v-model="form.reviewerName" placeholder="请输入审核人姓名" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.reviewStatus&&form.reviewStatus!='0'">
            <el-form-item label="审核结果" prop="reviewStatus">
              <el-select v-model="form.reviewStatus" clearable placeholder="请选择审核结果" :disabled="true" style="width: 100%">
                <el-option label="通过" value="1"></el-option>
                <el-option label="驳回" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.notes">
            <el-form-item label="备注">
              <el-input
                  v-model="form.notes"
                  disabled="true"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                  placeholder="如有驳回申请，请注明缘由"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="fileList.length>0">
            <el-form-item label="其他附件" style="font-weight: 700">
              <el-upload
                  style="width:100%"
                  v-model:file-list="fileList"
                  class="upload-demo"
                  :action="url"
                  :headers="upload.headers"
                  multiple
              >
                <el-button type="primary"    :disabled="true" link >添加附件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right;margin-top: 10px" v-if="showBtn">
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-scrollbar>
    </el-form>
    <!-- 添加或修改岗位对话框 -->
  </div>
</template>

<script setup name="communitySite">

import { getToken } from '@/utils/auth'

const { proxy } = getCurrentInstance();
const { sys_normal_disable,living_conditions,sys_user_sex} = proxy.useDict(
    "sys_normal_disable",'living_conditions',"sys_user_sex"
);
const url=ref(process.env.VUE_APP_BASE_API + "/file/upload")
const fileList=ref([])
const upload = reactive({
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
});
const emits = defineEmits('closed');
 // const { formData }=defineProps(['formData']);

const { formData, showBtn } = defineProps({
  formData: {
    type: Object,
    required: true
  },
  showBtn: {
    type: Boolean,
    default: true, // 设置默认值
  },
});
const data = reactive({
  form: {
  },
});

const {  form} = toRefs(data);


/** 提交按钮 */
onMounted(()=>{
  console.log('22222222',formData)
  form.value=formData;
  fileList.value=formData.otherAttachmentList
})
function cancel () {
  emits('closed', false);
}

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 280px;
  height: 180px;
  display: block;
}

</style>
<style>
.homened_container-info{
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 280px;
    height: 180px;
    text-align: center;
  }
}

</style>

